<script setup lang="ts">
import { useDialogSelectCurrency } from '~/dialogs/useDialogSelectCurrency';

interface Props {
    tabsActive:number
    detailPage?: boolean
}

withDefaults(defineProps<Props>(), {
    detailPage: false,
})

const { t } = useI18n()
const router = useRouter()
const { isLogin, currentGlobalCurrency, currentGlobalCurrencyBalance, userInfo } = storeToRefs(useAppStore())
const { openDialogSelectCurrency } = useDialogSelectCurrency()

const password = ref('')

const { data: interestConfig, runAsync: runAsyncInterestConfig } = useRequest(ApiMemberInterestConfig, {
    debounceInterval: 1000,
    debounceOptions: {
        leading: true,
        trailing: false,
    },
})
/** 当前币种配置利息 */
const vaultFig = computed(() => {
    return interestConfig.value ? interestConfig.value.rate : { interest_rate: '0.00', min_deposit: 0 }
})
/** 获取用户锁定余额 */
const { run: runLockerUpdate, loading: lockerUpdateLoading, } = useRequest(ApiMemberBalanceLockerUpdate, {
    async onSuccess() {
        //todo
    },
})
/** 获取用户锁定余额 */
const { data: lockerData, runAsync: getLockerData } = useRequest(ApiMemberBalanceLocker)


onMounted(() => {
    runAsyncInterestConfig({ cur: getCurrencyConfig(currentGlobalCurrency.value)?.cur })
})
</script>

<template>
    <div class="bg-[#323738] px-4 py-4 rounded-[6px] flex flex-col items-center"
        :style="{ 'border-radius': detailPage ? '0' : '6px' }">
        <div class="mb-4">
            <div class="mb-1">当前货币</div>
            <BaseInput v-model="currentGlobalCurrencyBalance" name="xx" type="number">
                <template #right-icon>
                    <div @click="openDialogSelectCurrency()" class="flex items-center justify-between w-[5.6rem] h-8  bg-[#3A4142] rounded px-2">
                      <div class="flex items-center">
                        <BaseCurrencyIcon class="pr-1" :cur="currentGlobalCurrency" style="--tg-base-currency-icon-width:1.25rem" />
                        <span>{{ currentGlobalCurrency }}</span>
                      </div>
                      <div>
                        <BaseIcon name="uni-arrow-down" />
                      </div>
                    </div>
                </template>
            </BaseInput>
        </div>
        <div class="mb-4">
            <div class="mb-1">{{tabsActive === 0? '存入金额' : '取出金额'  }}</div>
            <BaseInput v-model="currentGlobalCurrencyBalance" name="xxx">
                <template #right-icon>
                    <div class="flex w-[5.6rem] items-center justify-center h-8 bg-[#3A4142] rounded">
                        最大值
                    </div>
                </template>
            </BaseInput>
        </div>
        <div v-if="tabsActive===1" class="mb-4">
            <div class="mb-1">资金密码</div>
            <BaseInput v-model="password" name="xxx" placeholder="请输入资金密码">
                    <template #right-icon>
                    <div @click="openDialogSelectCurrency()" class="flex items-center justify-between w-[5.6rem] h-8  bg-[#3A4142] rounded px-2">
                      <div>
                        双重验证码
                      </div>
                      <div>
                        <BaseIcon name="uni-arrow-down" />
                      </div>
                    </div>
                </template>
            </BaseInput>
        </div>
        <div class="mb-4">利息每天结算，当前年利率
            <span>{{ vaultFig.interest_rate }}%</span>
        </div>
        <BaseButton v-if="tabsActive===0" type="primary"
            class="ml-[.3125rem] font-extrabold h-[2.125rem] rounded-lg px-4 text-base w-full mb-4">
            {{ t('存入利息宝') }}
        </BaseButton>
        <BaseButton v-else type="primary"
            class="ml-[.3125rem] font-extrabold h-[2.125rem] rounded-lg px-4 text-base w-full mb-4">
            {{ t('利息宝取款') }}
        </BaseButton>
        <div v-if="!detailPage" class="bg-[#416655] w-full text-sm flex flex-col items-center rounded-[6px] py-4">
            <div class="mb-4"><span class="text-[#24EE89] underline" @click="router.push('/setting/two-factor-auth')">启用2FA</span> 通过双重验证提高您的账户安全性</div>
            <div @click="router.push('/wallet/vault-more')">了解有关利息库的更多信息</div>
        </div>
    </div>
</template>
